<template>
	<view style="overflow: hidden;">
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="contentc">
			<uni-password ref="secrity" @input="onInput" @confirm="onConfirm">
				请输入6位支付密码
			</uni-password>

			<view class="" style="font-size: 28rpx;" @tap="setPwd2">
				忘记支付密码？马上设置
			</view>
		</view>

	</view>
</template>

<script>
	import uniPassword from '@/components/uni-password/uni-password.vue'
	import {
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniPassword
		},
		data() {
			return {
				title: '支付密码验证',
				bankId: 0,
				money: 0.00,
				password: '',
				showKeyboard: false,
				noClick: true
			};
		},
		onLoad(option) {
			let result = this.$api.isLogin();
			if (result === false) {
				return false;
			}

			this.bankId = option.bankId;
			this.money = option.money;
			if (this.bankId <= 0 || this.money <= 0) {
				this.$api.msg('非法操作！');
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}, 1000)
			}
		},

		methods: {
			...mapMutations(['logout']),

			onInput(e) {
				//e.cancel = true;
			},
			onConfirm(e) {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					this.$api.msg("请稍后再试")
					return false;
				}

				let password = e.value;
				this.password = password;
				this.checked()
			},

			async checked() {
				let res = await this.$myRequest({
					url: '/checkPsd2',
					data: {
						token: uni.getStorageSync('token'),
						password: this.password
					},
					methods: 'POST'
				})

				let dataObj = {
					token: uni.getStorageSync('token'),
					money: this.money,
					bank_id: this.bankId
				};
				this.submit(dataObj);
			},

			async setPwd2() {
				uni.navigateTo({
					url: "/pages6/pages/check-code/check-code?field=password2&title=修改支付密码"
				})
			},

			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/withdraw',
					data: dataObj,
					methods: 'post'
				})

				let status = res.data.status
				switch (status) {
					case 1:
						this.$api.msg(res.data.msg, 'success', 1000);
						uni.$emit('changeHasmoney')

						setTimeout(() => {
							uni.redirectTo({
								url: '/pages2/pages/financial-flow/financial-flow'
							})
						}, 1000)
						break;
					case 10:
						this.$api.msg(res.data.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages2/pages/personal/personal'
							})
						}, 1000)
						break;
					case 11:
						this.$api.msg(res.data.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages2/pages/work/work'
							})
						}, 1000)
						break;
					case 12:
						this.$api.msg(res.data.msg);
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/my/my'
							})
						}, 1000)
						break;
					case 13:
						this.$api.msg(res.data.msg);
						break;
				}
			},

		}
	}
</script>
<style>
	page {
		background-color: #f7f7f7;
		font-size: $font-base;
	}
</style>

<style lang='scss'>
	.keyboard-container {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}

	uni-button[type=primary] {
		background: #00C456 !important;
	}

	/* 选项卡 */
	.tab {
		padding: 0;
	}

	.tab-title {
		white-space: nowrap;
		text-align: center;
		background: #FFFFFF;
	}

	.tab-title view {
		width: auto;
		padding: 0 12px;
		margin: 0 8px;
		line-height: 42px;
		display: inline-block;
		text-align: center;
		border-bottom: 2px solid #FFFFFF;
		font-size: 30upx;
	}

	.tab-title view:first-child {
		margin-left: 0;
	}

	.tab-title view:last-child {
		margin-right: 0;
	}

	.tab-current {
		border-bottom: 4upx solid #00C777 !important;
		color: #00C777;
	}

	.tab-swiper {
		width: 100%;
		height: 350upx;
		padding: 0;
	}

	.tab-swiper swiper-item {
		width: 100%;
	}

	.tab-swiper swiper-item navigator {
		line-height: 70upx;
		width: 100%;
		display: block;
	}

	.tab-swiper-full {
		width: 100%;
		height: auto;
	}

	.tab-swiper-full swiper-item {
		width: 100%;
	}

	.tab-swiper-full scroll-view {
		width: 100%;
		height: 100%;
	}

	.center {
		text-align: center;
	}

	.mt-10 {
		margin-top: 10px;
	}

	.pt-10 {
		paddint-top: 10px;
	}

	.contentc {
		// #ifdef APP-PLUS
		padding-top: 160rpx;
		// #endif

		// #ifdef H5
		padding-top: 100rpx;
		// #endif

		text-align: center;
		height: auto;
		font-size: $font-base;
	}

	.payment-container {
		border-top: 1px solid #e2e2e2;
		height: calc(100%-44px);
		overflow: hidden;
	}

	.payment-container .payment {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		background: #fff;
	}

	.payment-container .payment view:nth-child(2) {
		flex: 1;
	}

	.payment-container .payment-active {
		background: #E2E2E2;
	}

	.payment-container .payment image {
		width: 30px;
		height: 30px;
		margin-right: 10px;
	}

	.money-container {
		background: #fff;
		padding: 10px;
	}

	.money-container .money-box {
		padding: 10px 0;
		border-bottom: 1px solid #efefef;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.money-container .money-box .button {
		font-size: 12px;
		color: #cf9f41;
	}

	.money-container .money-box view:nth-child(1) {
		font-size: 25px;
	}

	.money-container .money-box view:nth-child(2) {
		flex: 1;
		font-size: 30px;
		padding: 0 5px;
	}

	.money-container .tips {
		color: #222;
		padding-top: 10px;
		font-size: 12px;
	}

	.button-box {
		padding: 0 10px;
	}
</style>
